<template>
  <div class="app-container">
    <yd-navbar title="我的银行卡">
      <router-link to slot="left">
        <yd-navbar-back-icon @click.native="$router.back()"></yd-navbar-back-icon>
      </router-link>
      <span
        slot="right"
        style="color:#5c5c5c;font-size:14px;"
        @click="$router.push('/mine/bindCard')"
      >添加</span>
    </yd-navbar>
    <div class="main">
      <div
        v-for="(item, index) in list"
        :key="index"
        @click="unbindConfirm(item.bindId)"
        class="item"
        :style="{background:cardBackgroundColor[index]}"
      >
        <img :src="require('../../image/defaultHeadImg.jpeg')" alt />
        <div>
          <p>{{supportList.find(i=>i.bankId === item.bankId) && supportList.find(i=>i.bankId === item.bankId).name}}</p>
          <p>{{item.bankCard}}</p>
        </div>
      </div>
      <div class="noCard" v-if="!list.length" >未绑定银行卡!</div>
    </div>
  </div>
</template>
<script>
import {
  userBankCardList,
  userBankCardDetail,
  cash,
  unBindUserBankCard,
  bankList
} from "@/api";

export default {
  name: "userBankCard",
  data() {
    return {
      list: [{}, {}, {}],
      supportList: [],
      isBinding: false,
      cardBackgroundColor: ["orange", "gray", "yellowgreen", "skyblue"]
    };
  },
  mounted() {
    this.getData();
    this.getBankList();
  },
  methods: {
    getBankList() {
      bankList().then(res => {
        this.supportList = res.data.result;
      });
    },
    getData() {
      userBankCardList().then(res => {
        // this.list = res.data;
        console.log(this.list);
      });
    },

    unbindConfirm(id) {
      this.$dialog.confirm({
        title: "确认?",
        mes: "解绑此银行卡?",
        opts: () => {
          unBindUserBankCard(id).then(res => {
            this.$dialog.toast({ mes: "解绑成功", timeout: 1000 });
            this.getData();
          });
        }
      });
    }
  }
};
</script>
<style lang='less' scoped>
.app-container {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;

  .main {
    flex: 1;
    overflow: auto;
    padding: 0.15rem;
  }

  /deep/.yd-list .yd-list-img {
    display: none !important;
  }

  .item {
    width: 100%;
    height: 2rem;
    margin: 0 auto 0.15rem;
    border-radius: 0.3rem;
    display: flex;
    padding: 0.15rem;

    img {
      width: 1rem;
      height: 1rem;
      border-radius: 50%;
      margin-right: 0.3rem;
    }

    div {
      text-align: left;
      color: white;

      & p:first-child {
        font-size: 0.4rem;
        margin: 0.1rem 0 0.2rem;
        font-weight: 600;
      }

      & p:last-child {
        font-size: 0.5rem;
        letter-spacing: 1px;
      }
    }
  }

  .addCard {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: white;
  }

  .act {
    margin: 0 0.15rem;
    border-radius: 0.25rem;
    font-size: 0.3rem;
    font-weight: 500;
    padding: 0 0.5rem;
  }

  .noCard {
    font-size: 0.28rem;
    padding: 0.15rem;
  }
}
</style>